<template>
	<view class="code-area">
		<view class="flex-box">
			<input :value="val" type="digit" :focus="focus" :maxlength="maxlength" class="hide-input" @input="getVal" :adjust-position="true"/>
			<view v-bind:class="['item', { active: codeIndex == 1,'is-input': codeArr[0]}]">
				<view class="line"></view>
				<block v-if="isPwd && codeArr.length >= 1">
					<text class="dot">.</text>
				</block>
				<block v-else>{{codeArr[0]?codeArr[0]:''}}</block>
			</view>
			<view v-bind:class="['item', { active: codeIndex == 2 ,'is-input': codeArr[1]}]">
				<view class="line"></view>
				<block v-if="isPwd && codeArr.length >= 2">
					<text class="dot">.</text>
				</block>
				<block v-else>	{{ codeArr[1] ? codeArr[1] : ''}}</block>
			</view>
			<view v-bind:class="['item', { active: codeIndex == 3,'is-input': codeArr[2] }]">
				<view class="line"></view>
				<block v-if="isPwd && codeArr.length >= 3">
					<text class="dot">.</text>
				</block>
				<block v-else>	{{ codeArr[2] ? codeArr[2] : ''}}</block>
			</view>
			<view v-bind:class="['item', { active: codeIndex == 4,'is-input': codeArr[3]}]">
				<view class="line"></view>
				<block v-if="isPwd && codeArr.length >= 4">
					<text class="dot">.</text>
				</block>
				<block v-else>	{{ codeArr[3] ? codeArr[3] : ''}}</block>
			</view>
			<block v-if="maxlength === 6">				
				<view v-bind:class="['item', { active: codeIndex == 5,'is-input': codeArr[4]}]">
					<view class="line"></view>
					<block v-if="isPwd && codeArr.length >= 5">
						<text class="dot">.</text>
					</block>
					<block v-else>	{{ codeArr[4] ? codeArr[4] : ''}}</block>
				</view>
				<view v-bind:class="['item', { active: codeIndex == 6,'is-input': codeArr[5]}]">
					<view class="line"></view>
					<block v-if="isPwd && codeArr.length >= 6">
						<text class="dot">.</text>
					</block>
					<block v-else>	{{ codeArr[5] ? codeArr[5] : ''}}</block>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		focus: {
			type: Boolean,
			default: true
		},
		maxlength: {
			type: Number,
			default: 4
		},
		isPwd: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			codeIndex: 1, //下标
			codeArr: [],
			val:'',//输入框的值
		};
	},
	methods: {
		//取值
		getVal(e) {
			let { value } = e.detail;
			this.val=value;
			let arr = value.split('');
			this.codeIndex = arr.length + 1;
			this.codeArr = arr;
			if (this.codeIndex > Number(this.maxlength)) {
				this.$emit('finish',this.codeArr.join(''));
			}
		},
		clear(){
			this.codeIndex=1;
			this.codeArr=[];
			this.val="";
		}
	}
};
</script>

<style lang="scss">
.code-area {
	text-align: center;
	.flex-box {
		display: flex;
		flex-wrap: wrap;
		position: relative;
		justify-content: center;
	}
	.item {
		position: relative;
		flex: 1;
		width: 100rpx;
		height: 100rpx;
		margin-right: 14rpx;
		font-size: 52rpx;
		font-weight: bold;
		color: #333333;
		line-height: 100upx;
		box-sizing: border-box;
		border-bottom: solid 2rpx #DBDBDB;
		&.is-input{
			border-color: #141414;
		}
	}
	.item:last-child {
		margin-right: 0;
	}
	.active {
		border-color: #141414;
	}
	.active .line {
		display: block;
	}
	.line {
		display: none;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 2upx;
		height: 40upx;
		background: #141414;
		animation: twinkling 1s infinite ease;
	}
	.hide-input {
		position: absolute;
		top: 0;
		left: -100%;
		width: 200%;
		height: 100%;
		text-align: left;
		z-index: 9;
		opacity: 1;
	}
	@keyframes twinkling {
		0% {
			opacity: 0.2;
		}
		50% {
			opacity: 0.5;
		}
		100% {
			opacity: 0.2;
		}
	}
	
	.dot{
		font-size: 80upx;
		line-height: 40upx;
	}
}
</style>